<template>
	<view class="app-user-collect-store e-flex bg-white e-p-20 e-radius-20" >
		<radio class="e-m-r-20" :color="color" :checked="checked" @tap.stop="handleCheck" v-show="showRadio" />
		<view class="e-m-r-20">
			<load-image mode="aspectFill" :size="['100rpx']" shape="circle" :src="info.logo">
			</load-image>
		</view>
		<view class="e-flex-1 e-flex">
			<view class="e-flex-1">
				<view class="e-flex e-m-b-6">
					<text class="e-font-30 fw-500 ">{{ info.name }}</text>
					<view class="self-icon e-m-l-20" v-if="APP_HAS_OWN&&info.hasOwn">
						{{ $t('classify.自营') }}
					</view>
				</view>
				
				<view class="c-placeholder e-font-24">
					{{$t('classify.收藏')+info.collectedCount +' | ' + $t('classify.商品') +info.productCount }}
				</view>
			</view>
			<view class="app-user-collect-store__btn e-flex-xy-center" @tap="jump">
				<text class="e-font-24">{{$t('user.进店')}}</text>
			</view>
		</view>
	</view>
</template>
<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
	// #ifdef MP-WEIXIN
	// 将自定义节点设置成虚拟的，更加接近Vue组件的表现
	options: {
		virtualHost: true
	},
	// #endif
});
</script>
<script setup lang="ts">
	import {APP_HAS_OWN} from '@/env'
	import {
		useCurrentInstance
	} from '@/common/hooks'
	
	import type {StoreInfo} from '@/common/request/api'
	const props = defineProps<{
		info: StoreInfo;
		color:string
		showRadio:boolean
		checked:boolean
	}>();
	const emit = defineEmits(['change'])
	
	const ctx = useCurrentInstance()
	
	const jump = () => {
		let url = props.info.type === 1 ? '/pages/store/index':'/pages/nearby/store/info'
		ctx.$goTo(url,  { id:  props.info.id })
	}
	
	const handleCheck = () => {
		emit('change',props.info.id)
	}

</script>

<style scoped lang="scss">
@include appBem_b(user-collect-store) {
	@include appBem_e(btn) {
		min-width: 110rpx;
		padding: 0 20rpx;
		height: 56rpx;
		border-radius: 28rpx;
		border: 2rpx solid var(--color-primary);
		text{
			color:var(--color-primary)
		}
	}
}
</style>
